import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';
import {Modal, Spin,Button,Form,Upload,Input} from 'antd';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const antbtn = {
  width: '100%',
}

export default class ER extends Component {   
    constructor(props) {
        super(props);
        this.state = {
          loading: false,
          isModalOpen: false,
          ChartTitle:'',
          file: null,
          DataList:[],
          Xtitle:[],
          styles :{
            backgroundImage: 'url(/img/Bar.png)',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: 'cover',
            width: '100%',
            height: '100vh'
          }
        };
        this.normFile = this.normFile.bind(this);
        this.onFinish = this.onFinish.bind(this);
        this.handleChange = this.handleChange.bind(this);
      }
    
      showModal = () => {
        this.setState({
          isModalOpen: true,
        });
      };
      handleOk = () => {
        this.setState({
          isModalOpen: false,
        });
      };
      handleCancel = () => {
        this.setState({
          isModalOpen: false,
        });
      };
      handleChange = (e) => {
        this.setState({
          ChartTitle: e.target.value,
        });
      }
      normFile = (e) => {
        console.log('Upload event:', e);
        const File = e.file;
        this.setState({ file: File });
      }
      onFinish = (values) => {
        this.setState({
          isModalOpen: false,
        });
        this.initChart();
      } 
    initChart = () => {
        const { ChartTitle ,DataList } = this.state;
        this.setState({
            DataList:[]
        })
        var chartDom = document.getElementById('ERChart');
        this.myChart = echarts.init(chartDom);
        echarts.registerTransform(ecStat.transform.regression);
        fetch('./example/example-line.xlsx')
        .then(res =>res.text())
        .then(data => {
            const rows = data.split('\n');
            rows.map((row, index) => {
                const cells = row.split('\t');
                if(cells==''){return;}
                this.setState({
                    DataList :[...this.state.DataList,cells]
                })
            })
            this.state.DataList.shift();
            const data1 =[
                [1, 4862.4],
                [2, 5294.7],
                [3, 5934.5],
                [4, 7171.0],
                [5, 8964.4],
                [6, 10202.2],
                [7, 11962.5],
                [8, 14928.3],
                [9, 16909.2],
                [10, 18547.9],
                [11, 21617.8],
                [12, 26638.1],
                [13, 34634.4],
                [14, 46759.4],
                [15, 58478.1],
                [16, 67884.6],
                [17, 74462.6],
                [18, 79395.7]
            ]
            console.log(this.state.DataList);
            console.log(data1);
        var option = {
        dataset: [
            {
            source: data1       
            },
            {
            transform: {
                type: 'ecStat:regression',
                config: {
                method: 'exponential'
                }
            }
            }
        ],
        title: {
            text: ChartTitle,
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross'
            }
        },
        xAxis: {
            splitLine: {
            lineStyle: {
                type: 'dashed'
            }
            }
        },
        yAxis: {
            splitLine: {
            lineStyle: {
                type: 'dashed'
            }
            }
        },
        series: [
            {
            name: 'scatter',
            type: 'scatter',
            datasetIndex: 0
            },
            {
            name: 'line',
            type: 'line',
            smooth: true,
            datasetIndex: 1,
            symbolSize: 0.1,
            symbol: 'circle',
            label: { show: true, fontSize: 16 },
            labelLayout: { dx: -20 },
            encode: { label: 2, tooltip: 1 }
            }
        ]
        };
        this.myChart.setOption(option);
        })
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {
        const { isModalOpen ,loading } = this.state;
        return (
            <>
              <Button style={antbtn} onClick={() => this.showModal()} className='antbtn'>Open Modal</Button>
              <Modal title="Basic Modal" open={isModalOpen} onOk={() =>this.handleOk()} onCancel={() =>this.handleCancel()} 
              cancelButtonProps={{ style: { display: "none" } }} // 隐藏取消按钮
              okButtonProps={{ style: { display: "none" } }} // 隐藏确认按钮
              >
              <Spin spinning={loading}>  
              <Form onSubmit={this.handleSubmit}
                    name="validate_other"
                    {...formItemLayout}
                    onFinish={this.onFinish}
                    style={{
                      maxWidth: 600,
                    }}
                  >
                    <Form.Item label="Title">
                      <Input placeholder="Please Input Title" value={this.state.value} onChange={this.handleChange} />
                    </Form.Item>
                    <Form.Item label="Dragger">
                      <Form.Item name="dragger" multiple={false} valuePropName="file" getValueFromEvent={this.normFile} noStyle>
                       <Upload.Dragger name="files"  action="/upload.do" >
                          <p className="ant-upload-drag-icon">
                            <InboxOutlined />
                          </p>
                          <p className="ant-upload-text">Click or drag file to this area to upload</p>
                        </Upload.Dragger>
                        </Form.Item>
                      </Form.Item>
                      <Form.Item label="Example File">
                      <Button type="text" onClick={()=> this.getExampleFile()} danger>Example File</Button>
                      </Form.Item>
                    <Form.Item
                      wrapperCol={{
                        span: 12,
                        offset: 6,
                      }}
                    >
                      <Button type="primary" htmlType="submit" >
                        Submit
                      </Button>
                    </Form.Item>
                </Form></Spin>
              </Modal>
            <div className='w100 h100' id='ERChart'></div>
            </>
      )
    }
}
